<template>
  <codemirror
    ref="codeMirros"
    :value="value"
    :options="codeMirrosOptions"
    class="code"
  />
</template>

<script>
    import { codemirror } from 'vue-codemirror'
    // 导入使用的语言语法定义文件
    require('codemirror/mode/python/python.js')
    require('codemirror/mode/javascript/javascript.js')
    require('codemirror/mode/clike/clike.js')
    require('codemirror/mode/shell/shell.js')
    // 导入选中的theme文件
    require('codemirror/theme/blackboard.css')
    // 导入自动提示核心文件及样式
    require('codemirror/addon/hint/show-hint.css')
    require('codemirror/addon/hint/show-hint.js')
    // 导入指定语言的提示文件
    require('codemirror/addon/hint/javascript-hint.js')
    export default {
        name: 'CodeMirros',
        components: {
            codemirror
        },
        props: {
            value: {
                type: String,
                required: true,
                default: ''
            }
        },
        data() {
            return {
                codeMirrosOptions: {
                    value: '',
                    theme: 'darcula', // 主题
                    indentUnit: 2,
                    smartIndent: true,
                    tabSize: 4,
                    readOnly: true, // 只读
                    showCursorWhenSelecting: true,
                    lineNumbers: true, // 是否显示行数
                    firstLineNumber: 1
                },
                resArr: ''
            }
        },
        mounted() {

        },
        methods: {}
    }
</script>
